<template>
  <div class="my_container" style="height: calc(100% - 53px)">
    <div style="height: 100%; overflow: scroll">
      <van-cell size="large" style="margin-bottom: 3px" v-for="item in list" :key="item.Pk" :title="item.Creator?._v1" :label="item.CreateDate">
        <template #value>
          <p style="font-size: 28px">{{ item.Qty }}</p>
        </template>
        <template #icon>
          <van-icon @click="remove(item.Pk!)" style="margin-right: 10px" size="40" name="delete-o" />
        </template>
      </van-cell>
      <van-empty v-if="list?.length === 0" image="search" description="当前没有数据" />
    </div>
    <van-overlay :show="loading">
      <div class="loading_wrapper"><van-loading type="spinner" size="24" /></div
    ></van-overlay>
  </div>
</template>
<script setup lang="ts">
import { listStockOut, removeStockOut } from '@/api/stock';
import type { StockModel } from '@/model/stockmodel';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showConfirmDialog, showFailToast } from 'vant';

const loading = ref(false);
const list = ref<StockModel[]>();
const router = useRouter();
const remove = (pk: string) => {
  showConfirmDialog({
    title: '提示',
    message: '您确实要删除这笔记录吗？',
  }).then(() => {
    removeStockOut(pk)
      .then((r) => {
        showFailToast('操作成功');
        onLoad();
      })
      .catch((e) => {
        showFailToast('操作失败');
        loading.value = false;
      });
  });
};
const onLoad = () => {
  const thisQuery = router.currentRoute.value.query;
  if (!thisQuery || !thisQuery['pk']) return;
  loading.value = true;
  listStockOut(thisQuery['pk']!.toString())
    .then((r) => {
      list.value = r.Data;
      loading.value = false;
    })
    .catch((e) => {
      loading.value = false;
    });
};
onMounted(onLoad);
</script>
